/*
 * 评分组件
  星星 UI 文件路径说明：
      1. 点亮：`css/icon/star_full.svg`
      2. 未点亮：`css/icon/star.svg`
 */
const rateTemplate = `
<div class="rate">
  <div @click="select(i)" v-for="i in 5" :key="i+'s'" class="item">
    <object class="icon" :data="getPath(i)" type="image/svg+xml"></object>
  </div>
</div>
`;
Vue.component("my-rate", {
  template: rateTemplate,
  props: ["value"],
  data() {
    return {
      curCount: 0,
    };
  },
  watch: {
    value() {
      this.curCount = this.value;
    },
  },
  mounted() {
    this.curCount = this.value;
  },
  methods: {
    select(i) {
      this.curCount === i ? (this.curCount = 0) : (this.curCount = i);
      this.$emit("input", this.curCount);
    },
    getPath(i) {
      return `css/icon/star${i <= this.curCount ? "_full" : ""}.svg`;
    },
  },
});
